<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form表单</title>
</head>

<body>
  <form action="">
    <!-- 文本 -->
    <!-- label标签会关联for属性值对应的id的值的标签 
        type:类型
        id:唯一标识
        name: 传给后端的键值对的K值
        value:设置默认值
    -->
    <div>
      <label for="name">姓名</label>
      <input type="text" id="name" name="name" value="米斯特吴" />
    </div>

    <!-- 邮箱 
      placeholder="请输入邮箱":输入时候做的提醒
    -->
    <div>
      <label for="email">邮箱</label>
      <input type="email" name="email" id="email" placeholder="请输入邮箱" />
    </div>

    <!-- 数字 -->
    <div>
      <label for="age">年龄</label>
      <input type="number" id="age" placeholder="请输入年龄" name="age" />
    </div>

    <!-- date -->
    <div>
      <label for="birthday">生日</label>
      <input type="date" name="birthday" id="birthday" placeholder="请输入年龄" />
    </div>

    <!-- textarea文本框
        可通过鼠标拖动来调整大小
        cols:列
        rows:行
    -->
    <div>
      <label for="message">信息</label>
      <textarea name="message" id="message" cols="30" rows="10"></textarea>
    </div>

    <!-- select选项 -->
    <div>
      <label for="sex">性别</label>
      <select name="sex" id="sex">
        <option value="male">男</option>
        <option value="female">女</option>
        <option value="other">其他</option>
      </select>
    </div>

    <!-- radio -->
    <div>
      <label for="membership">成员</label>
      <input type="radio" name="membership" id="membership" value="vue" />vue
      <input type="radio" name="membership" id="membership" value="react" />react
      <input type="radio" name="membership" id="membership" value="node" />node
    </div>

    <!-- checkbox -->
    <div>
      <label for="membership">c成员</label>
      <input type="checkbox" name="membership" id="membership" value="vue" />vue
      <input type="checkbox" name="membership" id="membership" value="react" />react
      <input type="checkbox" name="membership" id="membership" value="node" />node
    </div>

    <!-- submit 
      当单击submit按钮时，就会将form表单的内容，提交到后端action指定的路径
    -->
    <input type="submit" value="注册" />

    <!-- button不会自动提交到后台去 -->
    <input type="button" value="注册" />

    <!-- reset -->
    <button type="reset">重置</button>
  </form>
</body>

</html>